<script setup lang="ts">
import { ref, type Ref, computed } from 'vue'
import { ElMessageBox } from 'element-plus'
import post from '../../lib/post'//引入封装请求
import FormItemText from '@/components/FormItemText.vue'; // 引入封装的组件


// 数据
const dialogVisible = ref(false)
const emit = defineEmits(['refreshList']); // defineEmits返回一个方法用来发送事件
const type = ref('')   //储存弹窗的类型
let record: any; // 保存一个临时变量
const form: Ref<{ name: any; description: string; type: string; modifyTime: string; createTime: string; organization: string }> = ref({
    name: '',
    description: '',
    type: '',
    modifyTime: '',
    createTime: '',
    organization: '',
})
const fromRef: any = ref();


// 函数
const showCreate = () => {
    type.value = 'create'
    form.value.organization = ''
    dialogVisible.value = true;
}
const showModify = (index: number, row: any) => {
    // console.log();
    record = row
    form.value.name = row.name,
        form.value.description = row.description
    form.value.type = row.type
    type.value = 'modify'
    dialogVisible.value = true;
}
const showCreateLower = (index: number, row: any) => {

    // console.log();
    record = row
    // form.value.name = row.name,

    //     form.value.description = row.description
    // form.value.type = row.type
    // console.log(row.id);
    form.value.organization = row.id
    type.value = 'createLower'
    dialogVisible.value = true;
}
const submitCreate = async () => {


    // 提交新增

    // 验证
    await fromRef.value.validate(); // 如果验证失败会抛出异常

    const data: any = await post('/create/organization', {
        ...(form.value),
        $uniq: 'name'
    })
    if (!data.success) {
        return ElMessageBox.alert(data.message)
    }
    emit('refreshList')

    form.value.name = ''
    form.value.description = ''
    form.value.type = ''
    form.value.organization = ''

    dialogVisible.value = false
}

const submitModify = async () => {

    // 验证
    await fromRef.value.validate(); // 如果验证失败会抛出异常
    console.log(form);

    // 发起请求
    const data: any = await post("/modify/organization", { // 一般使用扩展符添加属性
        id: record.id,
        ...form,
    }); // 直接提交form
    // console.log('=================data', data);
    if (!data.success) { // 错误处理
        // return alert(data.message);
        return ElMessageBox.alert(data.message);
    }
    // 通知父组件刷新列表
    emit('refreshList');
    dialogVisible.value = false; // 关闭弹窗
}

// 上传头像
// const onUploadSuccess = (res: any) => {
//     const url = 'http://localhost:5188' + res.result.url
//     form.head = url
// }


// type 的数据变动
// 如果为create值就为新增组织
// 如果为createLower值就为新增下级组织
// 如果为modify值就为修改组织信息
const typeChange = computed(() => {
    if (type.value == 'create') {
        return '新增组织'
    } else if (type.value == 'createLower') {
        return '新增下级组织'
    } else {
        return '修改组织信息'
    }
}
)






defineExpose({ showCreate, showModify, showCreateLower })




</script>



<template>
    <div>
        <el-dialog v-model="dialogVisible" :title="typeChange" width="40%">
            <el-form ref="fromRef" :model="form" label-width="120px">
                <!-- 组织名称 -->
                <FormItemText :form="form" type="name" label="组织名称" prop="name" required rule="organizationname" />


                <!-- 组织描述 -->
                <FormItemText :form="form" type="description" label="组织描述" prop="description" required />


                <!-- 组织类型 -->
                <el-form-item label="组织类型" prop="type" :rules="[
                    { required: true, message: '请选择组织类型' }]">
                    <el-radio-group v-model="form.type">
                        <el-radio label="小店" />
                        <el-radio label="超市" />
                        <el-radio label="工厂" />
                        <el-radio label="学校" />
                    </el-radio-group>
                </el-form-item>


                <!-- <FormItemText  :form="form" type="organization" label="组织下级" prop="organization" required />
               -->



                <!-- 选择权限 -->
                <!-- <el-form-item label="选择技能" prop="authority" :rules="[
                    { required: true, message: '请选择权限' }]">
                    <el-checkbox-group v-model="form.authority">
                        <el-checkbox label="查看人员" :value=1 name="authority" />
                        <el-checkbox label="管理人员" :value=2 name="authority" />
                        <el-checkbox label="查看角色" :value=3 name="authority" />
                        <el-checkbox label="管理角色" :value=1 name="authority" />
                        <el-checkbox label="查看组织" :value=1 name="authority" />
                        <el-checkbox label="管理组织" :value=1 name="authority" />
                        <el-checkbox label="查看商品" :value=1 name="authority" />
                        <el-checkbox label="管理商品" :value=1 name="authority" />
                        <el-checkbox label="查看自提点" :value=1 name="authority" />
                        <el-checkbox label="管理自提点" :value=1 name="authority" />
                    </el-checkbox-group>
                </el-form-item> -->



                <!-- 文本域 -->
                <!-- <el-form-item label="组织描述">
                    <el-input v-model="form.description" type="textarea" />
                </el-form-item> -->



            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false; form.name = ''
                    form.name = ''
                    form.description = ''
                    form.type = ''
                    form.modifyTime = ''">关闭</el-button>
                    <el-button v-if="type === 'create'|| 'createLower'" type="primary" @click="submitCreate()">
                        确认
                    </el-button>


                    <el-button v-else type="primary" @click="submitModify()">
                        确认
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>


<style scoped>
.upload {
    width: 100px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px dashed #d3d3d3;
}

.upload-icon {
    width: 80px;
    height: 80px;
    font-size: 40px;
}

.head {
    width: 100px;
    height: 100px;
}
</style>